<script setup lang="ts">
import {ExportOutlined, ImportOutlined, PlusOutlined, SyncOutlined} from "@ant-design/icons-vue";
import {computed, type PropType} from "vue";
import {Crud, Region} from "./CrudTypes";
import ObjectSearch from "@/models/core/ObjectSearch";
import CrudController from "@/components/CatCrud/CrudController";
import type {CrudConfig} from "@/components/CatCrud/CrudController";
import CatTable from "@/components/CatTable/CatTable.vue";

const props = defineProps({
  config: {
    type: Object as PropType<CrudConfig<any, any, ObjectSearch>>,
    required: true
  },
  controller: {
    type: Object as PropType<CrudController<any, any, ObjectSearch, any, any>>,
    required: false
  },
  regions: {
    type: Array<Region>,
    default: [Region.headLeft, Region.headRight, Region.footLeft, Region.footRight]
  },
  cruds: {
    type: Array<Crud>,
    default: [Crud.add, Crud.search, Crud.batchDelete, Crud.page]
  },
  searchHolder: {
    type: String,
    default: '请输入名称'
  },
  bodyHeight: {
    type: String
  },
  multiple: {
    type: Boolean,
    default: true
  }
});

const showHead = computed<boolean>(() => {
  return props.regions.includes(Region.headLeft) || props.regions.includes(Region.headRight);
});

const showFoot = computed(() => {
  return props.regions.includes(Region.footLeft) || props.regions.includes(Region.footRight);
});

const emit = defineEmits(['crudClick']);

function onCrudClick(crud: Crud | string) {
  props.controller?.onCrudClick(crud);
  emit("crudClick", crud);
}

</script>

<template>
  <div class="cat-crud">
    <!--上-->
    <div class="crud-head" v-if="showHead">
      <!--左上-->
      <div class="crud-head-left">
        <a-tooltip title="新增" v-if="cruds.includes(Crud.add)">
          <a-button
              type="primary"
              style="margin-right:10px;flex-shrink: 0"
              @click="onCrudClick(Crud.add)"
          >
            <template #icon>
              <plus-outlined style="fontSize: 16px;" class="cat-crud-icon add"/>
            </template>
          </a-button>
        </a-tooltip>
        <slot name="headLeft"></slot>
      </div>
      <!--右上-->
      <div class="crud-head-right" v-if="regions.includes(Region.headRight)">
        <slot name="headRight"></slot>
        <a-input-search
            class="search-input"
            style="width: 240px;margin-left:10px"
            v-if="cruds.includes(Crud.search)"
            v-model:value="config.search!.name"
            :placeholder="searchHolder"
            enter-button
            allowClear
            @search="onCrudClick(Crud.search)"
        />
        <a-tooltip title="导入">
          <a-upload
              v-if="cruds.includes(Crud.import)"
              class="import-btn"
              :file-list="[]"
              :maxCount="1"
              :before-upload="onCrudClick(Crud.import)"
          >
            <a-tooltip placement="top" , title="导入">
              <a-button>
                <template #icon>
                  <import-outlined class="cat-crud-icon"/>
                </template>
              </a-button>
            </a-tooltip>
          </a-upload>
        </a-tooltip>
        <a-tooltip title="导出">
          <export-outlined v-if="cruds.includes(Crud.export)" class="cat-crud-icon"
                           @click="onCrudClick(Crud.export)"/>
        </a-tooltip>
        <a-tooltip>
          <template #title>刷新</template>
          <sync-outlined
              v-if="cruds.includes(Crud.refresh)"
              class="cat-table-icon"
              @click="onCrudClick(Crud.refresh)"
          />
        </a-tooltip>
      </div>
    </div>
    <!--中-->
    <div class="crud-body" :style="{ height: showFoot ? 'calc(100% - 145px)' : '100%' }">
      <slot>
        <cat-table :multiple="multiple" :columns="config.columns" :actions="config.actions" :table-height="bodyHeight"
                    :config="config" :controller="controller" :selection="regions.includes(Region.footLeft)">
        </cat-table>
      </slot>
    </div>
    <!--下-->
    <div class="crud-foot" v-if="showFoot">
      <!--左下-->
      <div class="crud-foot-left">
        <span style="margin-right: 10px" v-if="regions.includes(Region.footLeft)">已选
          <!-- <span >{{ config.selectedRows!.length }}</span>项 -->
          <cat-text class="crud-batch-select-count">{{ config.selectedRows!.length }}</cat-text>项
        </span>
        <div v-if="config.selectedRows?.length">
          <a-popconfirm v-if="cruds.includes(Crud.batchDelete)"
                        title="确定要删除所有选中的数据吗?" @confirm="onCrudClick(Crud.batchDelete)">
            <a-button danger style="margin-right: 10px">删除</a-button>
          </a-popconfirm>
          <a-button v-if="cruds.includes(Crud.batchEnable)" style="margin-right: 10px"
                    @click="onCrudClick(Crud.batchEnable)">启用
          </a-button>
          <a-button v-if="cruds.includes(Crud.batchDisable)" style="margin-right: 10px"
                    @click="onCrudClick(Crud.batchDisable)">停用
          </a-button>
          <slot name="footLeft"></slot>
        </div>
      </div>
      <!--右下-->
      <div class="crud-foot-right" v-if="regions.includes(Region.footRight)">
        <a-pagination
            show-size-changer
            show-less-items
            v-if="cruds.includes(Crud.page)"
            v-model:current="config.page!.number"
            v-model:page-size="config.page!.size"
            :total="Number(config.page!.totalElements)"
            :show-total="(total: number) => `共 ${total} 条`"
            @change="onCrudClick(Crud.page)"
            @showSizeChange="onCrudClick(Crud.page)"
        />
        <slot name="footRight"></slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.cat-crud {
  height: 100%;
  width: 100%;
  flex-direction: column;
  display: flex;
  justify-content: space-between;
  overflow: hidden;

  .search-input :deep(.ant-input-affix-wrapper) {
    border-radius: 4px 0 0 4px !important;
  }

  :deep(.ant-table-wrapper) {
    height: 100%;
    &.drag {
      .ant-table-tbody {
        .ant-table-row {
          .ant-table-selection-column {
            cursor: move;
          }

          colgroup col:last-child {
            width: 0 !important;
          }
        }
      }
    }
  }

  :deep(.ant-table) {
    // height: 100%;
    border-radius: 0 !important;

    .sortable-drag {
      opacity: 1 !important;

      table {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #1D293A;
        color: @text6;

        & > tr > td {
          padding: 16px;
          border-bottom: 1px solid transparent;

          &:first-child {
            padding: 16px 8px;
            // padding: 12px 8px 12px 24px;
          }
        }
      }
    }

    .sortable-chosen.sortable-ghost {
      opacity: 0;
    }
  }

  :deep(.ant-table-container) {
    display: flex;
    flex-direction: column;
    height: 100%;

    .ant-table-body {
      flex: 1;
    }
  }
}

.cat-crud-icon {
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
  color: @wt;
  // &:hover{
  //   opacity: 0.9;
  // }
  &:active {
    opacity: 0.8;
  }
}

.add {
  margin: 0;
  // margin-right: 1px;
}

.crud-head {
  display: flex;
  justify-content: space-between;
  min-height: 22px;
  background-color: @wt;
  border-radius: 10px;
  padding: 15px;
  height: 62px;
  flex-shrink: 0;
  margin-bottom: 20px;

  .crud-head-left, .crud-head-right {
    display: flex;
    align-items: center;
  }

  .import-btn {
    .ant-btn {
      border: none;
    }
  }
}

.crud-body {
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.crud-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: @wt;
  flex-shrink: 0;
  // margin-top: 20px;
  height: 62px;
  padding: 15px;
  border-radius: 0 0 10px 10px;

  .crud-foot-left {
    display: flex;
    height: 100%;
    align-items: center;

    .crud-batch-select-count {

      width: 30px;
      display: inline-block;
      text-align: center;
    }
  }
}
</style>